<template>
    <div ref="pieChart" class="pie-chart"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    mounted() {
      const pieChart = echarts.init(this.$refs.pieChart);
      const option = {
        title: {
          text: '用户事务类型占比',
          subtext: '事务统计',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['睡眠', '饮食', '饮水', '服药', '其他'],
        },
        series: [
          {
            name: '事务类型',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 235, name: '睡眠' },
              { value: 274, name: '饮食' },
              { value: 310, name: '饮水' },
              { value: 134, name: '服药' },
              { value: 154, name: '其他' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      pieChart.setOption(option);
    },
  };
  </script>
  
  <style scoped>
  .pie-chart {
    width: 35%;
    height: 350px;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 1.75rem;
    box-shadow: 0 0 30px #0a113612;
  }
  </style>